<template>
  <div class="push">
    <navbar title="发布信息"></navbar>
    <page :bottom="0">

      <div class="shang">
        <van-field v-model="pushParmas.thing_title" maxlength="50" :clearable="true" rows="2" type="textarea" :autosize="minHeightTa"
          placeholder="物品的标题" />
        <van-field v-model="pushParmas.thing_introduce" :clearable="true" rows="5" type="textarea" maxlength="500"
          placeholder="请描述清楚时间,地点,物品特征等基本信息(限500字)" show-word-limit />
        <van-uploader v-model="uploadFileList" class="shangchaun" :after-read="afterRead" :max-count="1"/>
      </div>

      <div class="last">
        <div class="lasttitle">物品类型</div>
        <div :class="thingTypeIndex == index ? 'active lastBottom' : 'lastBottom'" @click="clickOne(index)"
          v-for="(item, index) in typeOne" :key="index">
          {{ item.title }}
        </div>
      </div>

      <div class="last">
        <div class="lasttitle">物品类别</div>
        <div :class="thingCategoryIndex == index ? 'active lastBottom' : 'lastBottom'" @click="clickTwo(index)"
          v-for="(item, index) in typeTwo" :key="index">
          {{ item.title }}
        </div>
      </div>

      <div class="zuilast">
        <van-icon class="zuilastclcl" name="smile-o" @click="pushEvent"/>
      </div>

    </page>
    
  </div>
</template>

<script>
import config from '@/config';
export default {
  data() {
    return {
      pushParmas: {
        user_id: 0,
        thing_title: "",
        thing_introduce: "",
        thing_img: null,
        thing_type: null,
        thing_category: null,
      },
      minHeightTa: { maxHeight: 100, minHeight: 0 },
      uploadFileList: [],
      thingTypeIndex: 0,
      thingCategoryIndex: 0,
      typeOne: [
        { title: '失物招领', type: 1 },
        { title: '寻物启事', type: 2 },
      ],
      typeTwo: [
        { title: '证件', type: 1 },
        { title: '服装', type: 2 },
        { title: '数码', type: 3 },
        { title: '日用品', type: 4 },
        { title: '其他', type: 5 },
      ],
    }
  },
  created() {
    this.pushParmas.user_id =  this.$utils.getItem("token").user_id
    this.thingTypeIndex = this.$route.query.id ? this.$route.query.id - 1 : this.thingTypeIndex
console.log(this.$route.query.id )
    this.pushParmas.thing_type = this.typeOne[this.thingTypeIndex].type
    this.pushParmas.thing_category = this.typeTwo[this.thingCategoryIndex].type

  },
  methods: {

    clickOne(index) {
      this.pushParmas.thing_type = this.typeOne[index].type
      this.thingTypeIndex = index
    
    },

    clickTwo(index) {
      this.thingCategoryIndex = index
      this.pushParmas.thing_category = this.typeTwo[index].type
    },
    async afterRead(fileImg) {
      let aliyunOssToken = await this.$http.home.token();
     
      let form = new FormData()
      for (const key in aliyunOssToken) {
        form.append(key, aliyunOssToken[key])
      }
      form.append("key", fileImg.file.name)
      form.append("file", fileImg.file)
   
      await this.$http.home.uploadFile(form,{
          "Content-Type": "multipart/form-data",
      });

      this.pushParmas.thing_img = `${config.aliOss.host}/${fileImg.file.name}`


    },

    async pushEvent() {
      if (this.pushParmas.thing_title.length == 0) {
        this.$toast("标题不能为空")
        return;
      }

      if (this.pushParmas.thing_introduce.length == 0) {
        this.$toast("内容不能为空")
        return;
      }

      console.log("pushParmas: ",this.pushParmas);


      let res = await this.$http.home.push(this.pushParmas);
    
      this.$toast({
        message: "发布成功",
        onClose: () => {
          this.$router.push({ name: "Square" })
        }
      })
    }

  }
}


</script>


<style scoped lang='less'>
@import "~@less/Push";
</style>
